<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    

    <van-index-bar :index-list="leftList">
      <div v-for="(item,index) in rightList" :key="index" >
        <van-index-anchor :index="item.name"  />
        <van-cell v-for="value in item.data" :key="value.id" @click="add(value.id)">
          <!-- 使用 title 插槽来自定义标题 -->
           <!-- @click="$router.push('/singerlist')" -->
          <template #title >
            <div class="van-cell-title" @click="$router.push({name:'singerlist',query:{id:value.id}})"> 
              <img width="45" height="45" :src="value.img1v1Url">
              <span class="custom-title">{{value.name}}</span>
            </div>
          </template>
        </van-cell>
      </div>

    </van-index-bar>

    <!-- 底部组件 -->
    <bottom-nav></bottom-nav>


  </div>
</template>

<script>
import {getArtistlist} from "../api/singer";
import headerNav from "../components/base/headerNav.vue";
import bottomNav from "../components/base/bottomNav.vue";
export default {
  data(){
    return {
      leftList:["A","B","C","D","E","F","G","H","I","J","K","L","N","M","O","P","Q","R","S","T","U","V","W","X","Y","Z",],
      rightList:[
        // {
        //   name:"A",
        //   data:[]
        // }
      ],
      valueId:"",
    }
  },
  components:{
    headerNav,
    bottomNav,
  },
  methods:{
    ArtistListFun(){
      for(let i = 0;i<this.leftList.length;i++){
        this.rightList.push({
          name:this.leftList[i]
        })
      }
    },
    add(id){
      console.log(id)
      // this.id.push(valueId);
    }
  },
  created(){
    this.ArtistListFun();//构建对象
    for(let i = 0;i < this.leftList.length;i++){
      getArtistlist({
        type:1,
        area:96,
        initial:this.leftList[i]
      }).then(data=>{
          let index = this.rightList.findIndex(item=>item.name == this.leftList[i]);
          this.$set(this.rightList[index],'data',data.artists)    
          // console.log(this.rightList);
          // console.log(data)
      })
    }
  }
}
</script>

<style lang="less">
.van-cell-title{
  display: flex;
  align-items: center;
  span{
    margin-left:20px;
  }
  img{
    border-radius: 5px;
  }

}
.van-index-anchor{
  background-color: #D9DADB;
}
</style>